<template>
  <div id="pfChart" class="gy-chart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    data: {
      type: Array, //排放量今年
    },
    data3: {
      type: Array, //排放量去年
    },
  },
  methods: {
    // 排放图表
    discharge() {
      if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose(); //解决echarts dom已经加载的报错
      }
      this.myChart = echarts.init(document.getElementById("pfChart"));

      let option = {
        tooltip: {
          trigger: "axis",
          transitionDuration: 0,
          axisPointer: {
            type: "none",
          },
        },

        legend: {
          data: ["许可量", "排放量"],
          bottom: "20",
          itemWidth: 15,
          itemHeight: 15,
          itemGap: 35,
          textStyle: {
            color: "#66ACB8", // 图例文字颜色
          },
        },
        grid: {
          left: "18%",

          right: "20",
          top: "20",
        },
        xAxis: {
          splitLine: {
            show: false,
          },
          type: "value",
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#adc5de",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#264471",
              width: 2,
              type: "solid",
            },
          },
          type: "category",
          data: ["VOCs", "SO2", "NOx"],
        },
        series: [
          {
            name: "许可量",
            type: "bar",
            barGap: "2%",
            barWidth: "14px",
            data: this.data,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "right",
                  color: "white",
                },
              },
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#BB5E26", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#FF921C", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          {
            name: "排放量",
            type: "bar",
            barWidth: "14px",
            data: this.data3,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "right",
                  color: "white",
                },
              },
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#2F62AD", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#127FEE", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
    // 窗口大小改变

    handleResize() {
      this.myChart.resize(); // 只要窗口大小改变 echarts跟着容器变化
    },
  },
  mounted() {
    // 监听窗口大小改变

    window.addEventListener("resize", this.handleResize);

    this.discharge();
  },
  watch: {
    data3: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.discharge(); // 重新绘制
      },
    },
  },
  // 销毁前
  beforeDestroy() {
    // 解绑事件 [性能优化]

    window.removeEventListener("resize", this.handleResize);
  },
};
</script>

<style lang="less" scoped>
.gy-chart {
  height: 3.875rem;
}
</style>